<template>
    <h1>页面显示</h1>
    编号：
    <input type="text" v-model="query.Num"> 
    门店名称：
    <input type="text" v-model="query.Name">
    状态：
    <select v-model="query.State">
        <option value="true">开店</option>
        <option value="false">闭店</option>
    </select>
    <input type="button" value="查询" @click="Cha">
    <input type="button" value="重置" @click="chong">
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="checkselect" @change="selectall">
                    </th>
                    <th>门店编号</th>
                    <th>门店名称</th>
                    <th>门店业态</th>
                    <th>状态</th>
                    <th>开业日期</th>
                    <th>门店电话</th>
                    <th>店长</th>
                    <th>店长电话</th>
                    <th>图片</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="h in data">
                    <th>
                        <input type="checkbox" v-model="ldlist"  :value="h.Id" >
                    </th>
                    <th>{{ h.Num }}</th>
                    <th>{{ h.Name }}</th>
                    <th>{{ h.YT }}</th>
                    <th>{{ h.State?"开店":"闭店" }}</th>
                    <th>{{ moment(h.CreateTime).format("YYYY-MM-DD HH:mm:ss") }}</th>
                    <th>{{ h.Phone }}</th>
                    <th>{{ h.DZ }}</th>
                    <th>{{ h.DZPhone }}</th>
                    <th>
                        <img :src="'https://localhost:7212/'+h.Img" style="width: 100px; height: 100px;" >
                    </th>
                    <th>
                        <input type="button" value="逻辑删除" @click="DelMember(h.Id)">
                    </th>
                    <th>
                        <input type="button" value="编辑" @click="Update(h.Id)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共 {{querydata.count}}  条
        当前 {{ query.PageIndex }}  页
        一共{{ querydata.pagecount }}  页
        一页 {{ query.PageSize }}  条
        <input type="button" value="1" @click="Fen(1)">
        <input type="button" value="2" @click="Fen(3)">
        
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        每页
       
        <select v-model="query.PageSize" @change="Load">
            <option>5</option>
            <option>10</option>
            <option>12</option>
            <option>15</option>
        </select>
        条
    </div>
    <input type="button" value="批量逻辑删除" @click="Del">
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import moment from 'moment';
import { useRouter } from 'vue-router';

const router=useRouter();

const Update=(val:any)=>{
    router.push({path:"/DetailView",query:{Id:val}})
}

const DelMember=(val:any)=>{
    if(confirm('确定删除？')){
        axios.delete("https://localhost:7212/api/Member/Del",{params:{Id:val}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
    }
    
}


const ldlist=ref([0])

const checkselect=ref(false)

const selectall=()=>{
   if(checkselect.value==true){
    for(var i=0;i<data.value.length;i++){
            ldlist.value.push(data.value[i].Id);
        }
   }
   else{
        ldlist.value=[0]
   }
}

const Del=()=>{
    if(confirm("确定删除吗？")){
        axios.delete("https://localhost:7212/api/Member/DelMember",{params:{Id:ldlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('批量逻辑删除成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
    }
  
}



const chong=()=>{
    query.value.Num=""
    query.value.Name=""
    query.value.State=""
    Show();
}


const Cha=()=>{
    query.value.PageIndex=1;
    Show();
}


const Load=()=>{
    Show();
}

const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }
    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}




const data=ref([{
"Id": 0,
  "Num": "",
  "Name": "",
  "YT": "",
  "State": true,
  "CreateTime": "",
  "Phone": "",
  "DZ": "",
  "DZPhone": "",
  "Delete": true,
  "Img": ""
}])

const query=ref({
    "Num":"",
    "Name":"",
    "State":"",
    PageIndex:1,
    PageSize:5,
})


const querydata=ref({
    count:0,
    pagecount:0
})



onMounted(()=>{
    Show();
})

const Show=()=>{
    axios.get("https://localhost:7212/api/Member/ShowMember",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize)
    })
}


</script>

